// import type { CalendarProps } from "./index";
// import { Dayjs } from "dayjs";

// interface MonthCalendarProps extends CalendarProps { }

// function getAllDays(date: Dayjs) {
//     const startDay = date.startOf("month");// 当月第一天
//     const day = startDay.day();// 当月第一天是星期几

//     const daysInfo: Array<{ date: Dayjs, isCurrentMonth: boolean }> = new Array(6 * 7);
//     for (let i = 0; i < day; i++) {
//         daysInfo[i] = {
//             date: startDay.subtract(day - i, "day"),
//             isCurrentMonth: false,
//         }
//     }
//     for (let i = day; i < daysInfo.length; i++) {
//         const calcDate = startDay.add(i - day, "day");// 计算出当前日期
//         daysInfo[i] = {
//             date: calcDate,
//             isCurrentMonth: calcDate.month() === date.month(),
//         }
//     }
//     return daysInfo;
// }

// function renderDays(days: Array<{ date: Dayjs, isCurrentMonth: boolean }>) {
//     const rows = [];
//     for (let i = 0; i < 6; i++) {
//         const row = [];
//         for (let j = 0; j < 7; j++) {
//             const item = days[i * 7 + j];
//             row[j] = <div className="calendar-month-body-cell">{item.date.date()}</div>
//         }
//         rows.push(row);
//     }
//     return rows.map(row => <div className="calendar-month-body-row">{row}</div>)
// }

// function MonthCalendar(_props: MonthCalendarProps) {

//     const weekList = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];

//     const allDays = getAllDays(_props.value);


//     return (
//         <div className="calendar-month">
//             <div className="calendar-month-week-list">
//                 {
//                     weekList.map((week) => (
//                         <div className="calendar-month-week-list-item" key={week}>{week}</div>
//                     ))
//                 }
//             </div>
//             <div className="calendar-month-body">
//                 {renderDays(allDays)}
//             </div>
//         </div>
//     );
// }
// export default MonthCalendar;
import type { CalendarProps } from './index'
import { Dayjs } from 'dayjs';

interface MonthCalendarProps extends CalendarProps {

}

function getAllDays(date: Dayjs) {
    const startDate = date.startOf('month')  // 这个月的 1 号
    const day = startDate.day()  // 1号是星期几

    const daysInfo: Array<{ date: Dayjs, currentMounth: boolean }> = new Array(6 * 7)

    for (let i = 0; i < day; i++) {
        daysInfo[i] = {
            date: startDate.subtract(day - i, 'day'),
            currentMounth: false
        }
    }

    for (let i = day; i < daysInfo.length; i++) {
        const calcDate = startDate.add(i - day, 'day')

        daysInfo[i] = {
            date: calcDate,
            currentMounth: calcDate.month() === date.month()
        }
    }

    return daysInfo
}


// 渲染allDays
function renderDays(days: Array<{ date: Dayjs, currentMounth: boolean }>) {
    const rows = []
    for (let i = 0; i < 6; i++) {
        const row = []
        for (let j = 0; j < 7; j++) {
            const item = days[i * 7 + j]  // {date: xxx, currentMounth: true}
            row[j] = <div className={'calendar-month-body-cell ' + (item.currentMounth ? 'calendar-month-body-cell-crrent' : '')}>{item.date.date()}</div>
        }
        rows.push(row)
    }
    return rows.map(row => <div className='calendar-month-body-row'>{row}</div>)
}


function MonthCalendar(props: MonthCalendarProps) {
    const weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    const allDays = getAllDays(props.value)
    console.log(allDays);

    return (
        <div className="calendar-month">
            <div className="calendar-month-week-list">
                {
                    weekList.map((week) => (
                        <div className="calendar-month-week-list-item" key={week}>
                            {week}
                        </div>
                    ))
                }
            </div>
            <div className="calendar-month-body">
                {renderDays(allDays)}
            </div>
        </div>
    )
}

export default MonthCalendar